<template>
  <div class="signature">
    <el-divider direction="horizontal" v-if="!disabled" content-position="left"></el-divider>
    <el-row :gutter="20" type="flex" v-if="!disabled">
      <el-button
        style="margin: 10px"
        type="warning"
        size="small"
        @click="clear()"
        >清空</el-button
      >
    </el-row>
    <el-image :src="node.answer" v-if="node.answer" fit="fill" :style="{'width':'100%',height:disabled?'400px':'100px'}"></el-image>
    <vue-signature v-if="!disabled"  ref="s1" :width="width" :height="400" />
  </div>
</template>

<script>
import VueSignature from "vue-signature-simple";
import { debounce } from "@/utils/index";
import { ImagePreview } from 'vant';
export default {
  components: { VueSignature , [ImagePreview.Component.name]: ImagePreview.Component,},
  props: ["node"],
  data() {
    return {
      width: 400,
      s1: null,
      debounceInit: null,
      disabled:false
    };
  },

  mounted() {
    this.width = document.getElementsByClassName("signature")[0].clientWidth;
    this.s1 = this.$refs.s1;
    this.debounceInit = debounce(100, this.createImage);
    let t=this
    while(1){
      if(t.$options._componentTag='el-form'&&t.$el&&t.$el.classList.contains('el-form')){
        this.disabled=t.$props.disabled
        break
      }else if (!t.$parent) {
        break
      }else{
        t=t.$parent
      }
    }
  },
  watch: {
    "s1.lastLocation": {
      handler(n, o) {
        o ? this.debounceInit() : null;
      },
    },
    "node.span": {
      handler(n, o) {
        this.width =
          document.getElementsByClassName("signature")[0].clientWidth;
      },
    },
  },
  methods: {
    clear() {
      this.$refs.s1.clear();
      this.node.answer = null;
    },
    createImage() {
      let a = this.$refs.s1.getSignature();
      this.node.answer = a;
    },
    preview(){
      ImagePreview([this.node.answer]);
    }
  },
};
</script>

<style scoped>
.signature {
  width: 100%;
}
</style>